<template>
  <!-- 开始：：页面加载器  -->
  <div class="page-loader page-loader-logo">
    <img alt="Logo" :src="logo" width="100"/>
    <div class="spinner" id="spinner" v-bind:class="spinnerClass"></div>
  </div>
  <!-- 结束：：页面加载器  -->
</template>
<script>
import $ from 'jquery';
export default {
  name: "Loader",
  props: {
    logo: String,
    spinnerClass: String
  },
  data() {
    return {
      number: localStorage.getItem("style")
    }
  },
  mounted() {
    let color;
    if (this.number === "0") {
      color = "border: 2px solid rgb(35, 206, 198);";
    } else if (this.number === "1") {
      color = "border: 2px solid rgb(105, 147, 255);";
    } else if (this.number === "2") {
      color = "border: 2px solid rgb(166, 224, 38);";
    } else if (this.number === "3") {
      color = "border: 2px solid rgb(236, 86, 101);";
    } else if (this.number === "4") {
      color = "border: 2px solid rgb(132, 73, 255);";
    } else if (this.number === "5") {
      color = "border: 2px solid rgb(255, 175, 25);";
    }
    //伪元素样式
    $('.spinner').append("<style>#spinner::before{" + color + " border-right: 2px solid transparent}</style>");
  }
};
</script>
